<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :show-qk="showQk"
      :query-form-config="queryFormConfig"
      @handleQuery="getDataList"
    />
    <div id="echarts" />

  </div>
</template>

<script>

import { venueList, businessSettlementSingle } from '@/api'
import { getFMdate } from '@/utils/index'
import { queryFormConfig } from './config'
import * as echarts from 'echarts'
export default {
  name: 'BusinessStatisticssEcharts',
  data() {
    return {
      queryFormConfig,
      showQk: false,
      venueList: [],
      list: [],
      dateList: [],
      dataDaysList: [],
      pagination: {
        page: 1,
        rows: 10,
        firstQueryTime: new Date()
      },

      total: 0,
      dateIndex: 1,
      filters: {},
      weekList: []
    }
  },
  created() {
    this.setDate(new Date())
    this.getVenueList()
  },
  methods: {
    // 获取场馆列表
    getVenueList() {
      venueList({
        param: { flag: '0' }
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          this.venueList = res.recordList
          this.filters = {
            venueId: res.recordList[0].id
          }
          const arr = res.recordList
          this.queryFormConfig.formItems[0].options = arr
          this.getDate(2)
          this.getDataList()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getDataList() {
      const param = this.filters
      if (param.time && param.time.length > 0) {
        param.startTime = param.time[0]
        param.endTime = param.time[1]
      } else {
        param.startTime = ''
        param.endTime = ''
      }
      businessSettlementSingle({
        param
      })
        .then((res) => {
          this.listLoading = false
          if (res.errorCode !== '000000') return
          const dataList = res.recordList
          const dateList = []
          const totalList = []

          const cashList = []
          const memberList = []
          const weChatList = []
          const aliPayList = []
          const transferList = []
          const bankCardList = []
          dataList.forEach((data) => {
            dateList.push(data['date'])
            data.responseList.forEach((response) => {
              response['date'] = data['date']
              if (!isNaN(parseFloat(response['cash']))) {
                const cash = Number.parseFloat(response['cash'])
                cashList.push(cash)
              }
              if (!isNaN(parseFloat(response['member']))) {
                const member = Number.parseFloat(response['member'])
                memberList.push(member)
              }

              if (!isNaN(parseFloat(response['weChat']))) {
                const weChat = Number.parseFloat(response['weChat'])
                weChatList.push(weChat)
              }
              if (!isNaN(parseFloat(response['aliPay']))) {
                const aliPay = Number.parseFloat(response['aliPay'])
                aliPayList.push(aliPay)
              }
              if (!isNaN(parseFloat(response['transfer']))) {
                const transfer = Number.parseFloat((response['transfer']))
                transferList.push(transfer)
              }
              if (!isNaN(parseFloat(response['bankCard']))) {
                const transfer = Number.parseFloat((response['bankCard']))
                bankCardList.push(transfer)
              }
            })
          })
          // stack: 'Total',
          if (cashList.length) {
            const cashObject = {
              name: '现金',
              type: 'line',
              data: cashList
            }
            totalList.push(cashObject)
          }
          if (memberList.length) {
            const memberObject = {
              name: '会员卡',
              type: 'line',
              data: memberList
            }
            totalList.push(memberObject)
          }
          if (weChatList.length) {
            const weChatObject = {
              name: '微信',
              type: 'line',
              data: weChatList
            }
            totalList.push(weChatObject)
          }
          if (aliPayList.length) {
            const aliPayObject = {
              name: '支付宝',
              type: 'line',
              data: aliPayList
            }
            totalList.push(aliPayObject)
          }
          if (transferList.length) {
            const transferObject = {
              name: '转账',
              type: 'line',
              data: transferList
            }
            totalList.push(transferObject)
          }
          if (bankCardList.length) {
            const bankcardObject = {
              name: '银行卡',
              type: 'line',
              data: bankCardList
            }
            totalList.push(bankcardObject)
          }
          this.dateList = dateList
          this.dataDaysList = []
          this.dataDaysList = totalList
          this.getChartData()
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    getDate(e) {
      this.dateIndex = e
      if (e === 1) {
        this.$set(this.filters, 'time', [getFMdate(-1, '-').slice(0, 10), getFMdate(-1, '-').slice(0, 10)])
      } else if (e === 2) {
        this.$set(this.filters, 'time', [this.weekList[0].value, this.weekList[6].value])
      } else {
        var date = new Date()
        var year = date.getFullYear() + '-'
        var month = this.calculation(date.getMonth() + 1) + '-'
        var day = new Date(date.getFullYear(), date.getMonth() + 1, 0)
        this.$set(this.filters, 'time', [year + month + '01', year + month + day.getDate()])
      }
    },
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'][date.getDay()]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate(date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      date = this.addDate(date, week * -1)
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
      console.log(11, arr)
    },
    getChartData() {
      var chartDom = document.getElementById('echarts')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['现金', '会员卡', '微信', '支付宝', '转账', '银行卡']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateList
        },
        yAxis: {
          type: 'value'
        },
        series: this.dataDaysList
      }

      option && myChart.setOption(option)
    }
  }
}
</script>
<style scoped lang="scss">
.han1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tabDate {
  display: flex;
  div {
    background-color: #F5F7FA;
    color:#111111;
    display: inline-block;
    padding: 0 20px;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    cursor: pointer;
    &:nth-of-type(2){
      border-left: 1px solid #DCDFE6;
      border-right: 1px solid #DCDFE6;
    }
    &.on {
      color: #fff;
      background-color: #435EBE;
    }
  }
}
#echarts {
  width: 100%;
  height: 500px;
}
</style>
